<template>
  <div class="distance-triangle-wrapper">
    <div
      class="distance-triangle"
      :style="triangleLeft"
    ></div>
  </div>
</template>

<script>
import { getPicUnit } from '@/utils/UnitConversionUtils.js'
export default {
  components: {

  },
  data() {
    return {
      triangleLeft: 0,
      routeLineLeft: 0,
      scrollTimer: null // 监听线路滑动变化的计时器
    }
  },
  computed: {
    routeLineEle() {
      return this.$el.nextElementSibling
    }
  },
  mounted() {
    document.addEventListener(
      'resume',
      () => {
        this.addRouteLineScrollTimer()
      },
      false
    )
    this.addRouteLineScrollTimer()
  },
  methods: {
    addRouteLineScrollTimer() {
      // 页面在后台，以及无选中的站点时不监听站点移动变化
      if (window.pause) {
        return
      }
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer)
        this.scrollTimer = null
      }
      if (this.routeLineEle) {
        let routeLineScrollLeft = this.routeLineEle.scrollLeft
        // if (routeLineScrollLeft !== this.routeLineLeft) {
        // this.routeLineLeft = routeLineScrollLeft
        let wrapperLeft = getPicUnit(routeLineScrollLeft)
        // 先计算三角形的中心点的left
        let left = (this.$store.getters.selectedIndex + 0.5) * 150 - 30 - wrapperLeft
        if (left < 0) {
          left = -38 / 75
        } else if (left > 750) {
          left = (750 - 36) / 75
        } else {
          left = (left - 18) / 75
        }
        this.triangleLeft = `left:${left}rem`
        // }
      }
      this.scrollTimer = setTimeout(this.addRouteLineScrollTimer, 1)
    }
  }
}
</script>

<style>
/* 移动的小三角的容器 */
.distance-triangle-wrapper {
  position: relative;
  top: -4px;
  /* top: 250px; */
  width: 690px;
  height: 20px;
  margin: 0 30px;
  overflow: hidden;
}
/* 移动的小三角 */
.distance-triangle {
  position: absolute;
  left: 0;
  top: 0;
  /* transition: left 0.5s; */
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}
</style>
